<template>
    <div class="lz-opticalbox d-flex">
        <div class="address text-center">
            <img src="./../../../assets/opticalbox/gjx_icon_big.png" alt="">
            <div class="address_detail">
                <img src="./../../../assets/opticalbox/Location.png" alt="">
                <div>{{data.lockAddress}}</div>
            </div>
        </div>
        <div class="detail">
            <div class="item-container d-flex justify-content-between">
                <div class="item">
                    <p class="title">温度</p>
                    <img src="./../../../assets/opticalbox/temperature.png" alt="">
                    <p class="txt">暂无</p>
                </div>
                <div class="item">
                    <p class="title">湿度</p>
                    <img src="./../../../assets/opticalbox/wet.png" alt="">
                    <p class="txt">暂无</p>
                </div>
                <div class="item">
                    <p class="title">电量</p>
                    <img src="./../../../assets/opticalbox/cell.png" alt="">
                    <p class="txt">{{data.electric}}%</p>
                </div>
                <div class="item">
                    <p class="title">状态</p>
                    <img src="./../../../assets/opticalbox/lock_open.png" alt="">
                    <p class="txt">暂无</p>
                </div>
            </div>
            <div class="operation d-flex">
                <el-button type="primary" plain size="small" @click.stop="toAuthorize">人员授权</el-button>
                <el-button type="primary" plain size="small" @click.stop="toRecord">开锁记录</el-button>
            </div>
        </div>

        <el-dialog title="开锁记录" :visible.sync="dialogTableVisible" @closed="recordClose" top="10vh" custom-class="record_dialog" append-to-body>
			<div class="time_range">
				<el-date-picker size="small" v-model="record_date" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期"
					end-placeholder="结束日期" :clearable="false" @change="dateChange">
				</el-date-picker>
			</div>
			<el-table :data="tableData" class="record_list" max-height="400px">
				<el-table-column property="createTime" label="开锁日期" width="180"></el-table-column>
				<el-table-column property="name" label="姓名" width="150"></el-table-column>
                <el-table-column property="phone" label="联系方式" width="100"></el-table-column>
				<el-table-column property="lockType" label="开锁说明">
                
                    <template slot-scope="scope">
                        <span>{{ getLockExplain(scope.row.lockType) }}</span>
                    </template>
                </el-table-column>
                <el-table-column property="status" label="状态">
                    <template slot-scope="{row}">
                        <span class="lockStatus" :class="{success:row.status===1, fail: row.status===0}">{{getStatusText(row.status)}}</span>
                    </template>
                </el-table-column>
			</el-table>

			<el-pagination class="pagination pt-2 pb-2 justify-content-end" background layout="prev, pager, next"
				:total="totalElements" :page-size.sync="numPerPage" @current-change="currentChange"></el-pagination>
		</el-dialog>


        <el-dialog title="授权人员" :visible.sync="dialogAuthorizeVisible" top="8vh" width="1080px" append-to-body>
			<AuthorizeCom :show="dialogAuthorizeVisible" :data="data"
                @sendSecurity="toSendSecurityHandler"
                @toUnlockExplain="toUnlockingExplainHandler"></AuthorizeCom>
		</el-dialog>


        <el-dialog title="发送密钥" :visible.sync="dialogSendSecurityVisible" width="500px" append-to-body>
            <SendSecurityDialog :data="data" :show="dialogSendSecurityVisible" :sender="securitySender" @closeSendSecurity="closeSendSecurity" 
            :close-on-click-modal="false" :close-on-press-escape="false"></SendSecurityDialog>
        </el-dialog>

        <el-dialog title="开锁说明" :visible.sync="dialogUnlockingExplainVisible" width="500px" append-to-body>
            <UnlockingExplainDialog :data="data" :show="dialogUnlockingExplainVisible" @closeUnlockExplain="closeUnlockExplain" 
            :close-on-click-modal="false" :close-on-press-escape="false">
            </UnlockingExplainDialog>
        </el-dialog>

    </div>
</template>

<script>
import { mapState } from 'vuex';
import AuthorizeCom from './Authorize.dialog';
import SendSecurityDialog from './SendSecurity.dialog';
import UnlockingExplainDialog from './UnlockingExplain.dialog';
import moment from 'moment';

export default {
    name: 'OpticalBoxDetail',
    components: {AuthorizeCom, SendSecurityDialog, UnlockingExplainDialog},
    props: {
        data: Object
    },
    computed: {
        ...mapState({
            lockExplain: 'lockExplain',
            recordType: 'recordType'
        })
    },
    data(){
        return {
            dialogTableVisible: false,  // 开锁记录
            dialogAuthorizeVisible: false,  // 人员授权
            dialogSendSecurityVisible: false,   // 发送密钥
            dialogUnlockingExplainVisible: false,   // 开锁说明
            record_date: ['', ''],

            pageNum: 0,
            numPerPage: 20,

            totalPages: 0,
            totalElements: 0,
            
            tableData: [],

            securitySender: null,   //发送秘钥sender
        }
    },
    created(){},
    methods: {
        format(fmt,date){
            var o = {   
                "M+" : date.getMonth()+1,                 //月份   
                "d+" : date.getDate(),                    //日   
                "h+" : date.getHours(),                   //小时   
                "m+" : date.getMinutes(),                 //分   
                "s+" : date.getSeconds(),                 //秒   
                "q+" : Math.floor((date.getMonth()+3)/3), //季度   
                "S"  : date.getMilliseconds()             //毫秒   
            };   
            if(/(y+)/.test(fmt))   
                fmt=fmt.replace(RegExp.$1, (date.getFullYear()+"").substr(4 - RegExp.$1.length));   
            for(var k in o)   
                if(new RegExp("("+ k +")").test(fmt))   
            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));   
            return fmt; 
        },
        getLockExplain(type) {
            return this.recordType[ type ];
        },
        getStatusText(status){
            return status === 1 ? '成功' : '失败';
        },
        fetchRecordList(startTime, endTime){
            this.$obHttp.httpPost(this.$obHttp.Api.getOpenLockRecords, {
                endTime, startTime,
                lockId: this.data.id,
                pageNum: this.pageNum,
                numPerPage: this.numPerPage
            }).then(response=>{
                if( response ){
                    let {contents, totalElements, totalPages} = response.data;
                    this.tableData = contents;
                    this.totalPages = totalPages;
                    this.totalElements = totalElements;
                }
            })
        },
        currentChange(currentPage){
            this.pageNum = currentPage - 1;
			this.fetchRecordList(this.record_date[0], this.record_date[1]);
        },
        dateChange([start, end]){
            this.pageNum = 0;
            this.fetchRecordList(start, end);
        },

        toRecord(){
            let now = new Date();
            this.record_date = [moment().subtract('d', 3).format('YYYY-MM-DD HH:mm:ss'), moment().format('YYYY-MM-DD HH:mm:ss')];
            this.$nextTick(()=>{
                this.fetchRecordList(this.record_date[0], this.record_date[1]);
                this.dialogTableVisible = true;
            });
        },
        recordClose(){
            // this.record_date = ['', ''];
            this.pageNum = 0;
            this.totalElements = 0;
            this.tableData = [];
        },
        toAuthorize(){
            this.dialogAuthorizeVisible = true;
        },

        toSendSecurityHandler(event){
            this.dialogSendSecurityVisible = true;
            this.securitySender = event;
        },
        closeSendSecurity(){
            this.dialogSendSecurityVisible = false;
        },
        toUnlockingExplainHandler(){
            this.dialogUnlockingExplainVisible = true;
        },
        closeUnlockExplain(){
            this.dialogUnlockingExplainVisible = false;
        }
    }
}
</script>

<style lang="scss" scoped>
    .lz-opticalbox{
        margin-bottom: 40px;
    }
    .address{
        padding-left: 72px; padding-right: 72px;
        .address_detail{
            margin-top: 19px;
            div {
                margin-top: 5px;
                width: 149px;
                font-size:14px;
                color:#333333;
                word-break: break-all;
            }
        }
        border-right:2px solid #cccccc;
    }
    .detail{flex: 1; text-align: center;}
    .item-container{
        .item{
            flex: 1;
            .title{
                margin-bottom: 26px;
                font-size:20px;
                color:#666666;
            }
            .txt{margin-top: 16px;font-size:18px;color:#666666;}
        }
    }
    .operation{
        margin-top: 76px;
        padding-left: 59px;
        .el-button{
            width: 260px;
            &:first-child{
                margin-right: 50px;
            }
        }
    }

    .record_dialog{
        overflow: hidden;
        .record_list {
            overflow: auto;
        }
        .lockStatus{
            &.success{color: #67C23A;}
            &.fail{color: #F56C6C;}
        }
    }    

</style>

